<?php
/*
    Vista principal del porfolio.
    @author: bmagario
*/
?>

<!-- SE CREA EL MODEL PARA LA APLICACION -->
<div id="sg-page-top" data-ng-app="app">
    <!-- NAVBAR -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sg-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#sg-page-top">Softhing</a>
            </div>

            <!-- Nabvar links to sections -->
            <div class="collapse navbar-collapse" id="sg-navbar-collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li class="hidden">
                        <a href="#sg-page-top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#sg-portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#sg-about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#sg-services">Services</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#sg-contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- END NAVBAR -->


     <!-- div donde se renderizan las vistas -->
    <div class="">

        <!-- PORTFOLIO -->
        <section id="sg-portfolio" class="" data-ng-controller="portfolioCtrl as pfvm">
            <div class="container sg-portfolio">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>Portfolio</h2>
                        <hr class="star-primary">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 sg-portfolio-item" data-ng-repeat="pf in pfvm.portfolio">
                        {{pf.name}}
                        <a class="sg-portfolio-link" data-toggle="modal" data-target="#myModal{{$index + 1}}">
                            <div class="caption">
                                <div class="caption-content">
                                    <i class="fa fa-search-plus fa-3x"></i>
                                </div>
                            </div>
                            <img ng-src="./static/images/portfolio/{{pf.thumb}}" class="img-responsive" alt="">
                        </a>
                        <!-- Modal -->
                        <div class="modal fade sg-modal" id="myModal{{$index + 1}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel{{$index + 1}}">{{pf.name}}</h4>
                              </div>
                              <div class="modal-body">
                                {{pf.description}}
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- ABOUT --> 
        <section id="sg-about" class="">
            <div class="container sg-about">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>SADADASDASD </h2>
                    </div>
                </div>
            </div>
        </section>

        <!-- SERVICES -->
        <section id="sg-services" class="bg-primary">
            <div class="container sg-services">
                <div class="row text-center">
                    <div class="col-lg-10 col-lg-offset-1">
                        <h2>Our Services</h2>
                        <hr class="small">
                        <div class="row">
                            <div class="col-md-3 col-sm-6">
                                <div class="sg-service-item">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-cloud fa-stack-1x text-primary"></i>
                                </span>
                                    <h4>
                                        <strong>Service Name</strong>
                                    </h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    <a href="#" class="btn btn-light">Learn More</a>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="sg-service-item">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-compass fa-stack-1x text-primary"></i>
                                </span>
                                    <h4>
                                        <strong>Service Name</strong>
                                    </h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    <a href="#" class="btn btn-light">Learn More</a>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="sg-service-item">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-flask fa-stack-1x text-primary"></i>
                                </span>
                                    <h4>
                                        <strong>Service Name</strong>
                                    </h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    <a href="#" class="btn btn-light">Learn More</a>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="sg-service-item">
                                    <span class="fa-stack fa-4x">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-shield fa-stack-1x text-primary"></i>
                                </span>
                                    <h4><strong>Service Name</strong>
                                    </h4>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    <a href="#" class="btn btn-light">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- ABOUT --> 
        <section id="sg-contact" class="">
            <div class="container sg-contact">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <h2>Contact </h2>
                    </div>
                </div>
            </div>
        </section>

    </div>

</div><!-- END APP -->